<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>例子</title>
    <!--<link href="http://cdn.bootcss.com/bootswatch/3.3.5/paper/bootstrap.css" rel="stylesheet">-->
    <link rel="stylesheet" href="lib/ztree/zTreeStyle.css" />
    <link rel="stylesheet" href="dist/treeSelect.css" />
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <!--<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>-->
    <!--<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>-->
    <script src="lib/ztree/jquery.ztree.core-3.5.js"></script>
    <script src="http://www.treejs.cn/v3/js/jquery.ztree.excheck.js"></script>
    <script src="treeSelect.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <button onclick="showValue()">点击</button>
        </div>
        <div class="row">
            <div class="col-md-6">
                <form action="#">
                    <h3>表单</h3>
                    <div class="form-group">
                        <label for="depart">部门</label>
                        <div id="depart"></div>
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <div id="sex"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        var sexNode = [{
            name: '男',
            id: '1',
            chkDisabled: false,
            children: [{
                name: '好基友',
                id: 3,
                chkDisabled: false,
                children: [{
                    id: 4,
                    name: '好基友1',
                    chkDisabled: false,
                    checked: true
                }, {
                    id: 5,
                    name: '好基友2',
                    chkDisabled: false,
                    checked: true
                }]
            }]
        }, {
            name: '女',
            id: '2'
        }];
        // sexNode.forEach(function (itemFrist) {
        //     itemFrist.chkDisabled = true;
        //     if (itemFrist.children && itemFrist.length > 0) {
        //         itemFrist.children.forEach(function (itemSecond) {
        //             itemSecond.chkDisabled = true;
        //         });
        //     }
        // });
        // $.ajax({
        //     type: 'get',
        //     url: "sex.json",
        //     success: function (data) {
        //         data.forEach(function (itemFrist) {
        //             itemFrist.chkDisabled = true;
        //             if (itemFrist.children && itemFrist.children.length > 0) {
        //                 itemFrist.children.forEach(function (itemSecond) {
        //                     itemSecond.chkDisabled = true;
        //                 });
        //             }
        //         });

        //         var sexInput = new TreeSelect({
        //             // type: "get",
        //             // url: "sex.json",
        //             element: '#sex',
        //             data: data,
        //             valueKey: 'id'
        //         });
        //     }
        // });

        var sexInput = new TreeSelect({
            // type: "get",
            // url: "sex.json",
            element: '#sex',
            data: sexNode,
            valueKey: 'id',
            // selectedIds: '1,4,5',
            onlyChooseThreeLevel: false,
            checkEnable: true,
            editEnable: false,
            isShowInput: false,
            callback: function (data) {
               
            }
        });

        //   sexInput.showSelectedNodes('4');

        var depart_input = new TreeSelect({
            url: 'area.json',
            type: 'get',
            element: '#depart',
            valueKey: 'id',
            isShowInput: false,
            onlyChooseThreeLevel: false
        });

        function showValue() {
            alert(sexInput.value);
        }
    </script>
</body>

</html>